<template>
  <div>
    <el-card class="question-card">
      <h3>{{ currentIndex + 1 }}. {{ currentQuestion.题目标题 }}?</h3>
      <el-checkbox-group
        v-if="currentQuestion.类型 === '多选'"
        v-model="answers[currentQuestion.id]"
      >
        <el-checkbox label="A">{{ currentQuestion.A }}</el-checkbox>
        <el-checkbox label="B">{{ currentQuestion.B }}</el-checkbox>
        <el-checkbox label="C">{{ currentQuestion.C }}</el-checkbox>
        <el-checkbox label="D">{{ currentQuestion.D }}</el-checkbox>
        <el-checkbox v-if="currentQuestion.E" label="E">{{
          currentQuestion.E
        }}</el-checkbox>
      </el-checkbox-group>
      <el-radio-group v-else v-model="answers[currentQuestion.id]">
        <el-radio label="A">{{ currentQuestion.A }}</el-radio>
        <el-radio label="B">{{ currentQuestion.B }}</el-radio>
        <el-radio label="C">{{ currentQuestion.C }}</el-radio>
        <el-radio label="D">{{ currentQuestion.D }}</el-radio>
        <el-radio v-if="currentQuestion.E" label="E">{{
          currentQuestion.E
        }}</el-radio>
      </el-radio-group>
    </el-card>
    <div class="navigation-buttons">
      <el-button
        type="primary"
        @click="prevQuestion"
        :disabled="currentIndex === 0"
        >上一题</el-button
      >
      <el-button
        v-if="!isLastQuestion || !isAllAnswered()"
        type="primary"
        @click="nextQuestion"
        >下一题</el-button
      >
      <el-button
        v-if="isLastQuestion && isAllAnswered()"
        type="success"
        @click="submitQuiz"
        >提交</el-button
      >
    </div>

    <!-- 提示信息 -->
    <el-dialog title="提示" v-model="warningDialogVisible">
      <p>请完成所有题目再提交。</p>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="warningDialogVisible = false">确定</el-button>
      </span> -->

      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="warningDialogVisible = false">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import {
  ElCard,
  ElButton,
  ElCheckboxGroup,
  ElCheckbox,
  ElRadioGroup,
  ElRadio,
  ElDialog
} from "element-plus";

const questions = ref([
  {
    id: 10,
    RowNum: 1,
    parentId: 0,
    stateCode: 0,
    addTime: "2024/7/8",
    addUser: 71,
    类型: "多选",
    题目标题: "测试多选一",
    A: "选项一",
    B: "选项二",
    C: "选项三",
    D: "选项四",
    E: "",
    正确答案: "AB",
    分值: "1",
    wjId: 1,
    问卷题号: "5,6,7,10,"
  },
  {
    id: 7,
    RowNum: 2,
    parentId: 0,
    stateCode: 0,
    addTime: "2024/7/8",
    addUser: 71,
    类型: "单选",
    题目标题: "您的性格特点",
    A: "热情",
    B: "孤僻",
    C: "腼腆",
    D: "乐观",
    E: "",
    正确答案: "D",
    分值: "1",
    wjId: 1,
    问卷题号: "5,6,7,10,"
  },
  {
    id: 6,
    RowNum: 3,
    parentId: 0,
    stateCode: 0,
    addTime: "2024/7/8",
    addUser: 71,
    类型: "多选",
    题目标题: "您喜欢的颜色",
    A: "红",
    B: "黄",
    C: "蓝",
    D: "绿",
    E: "紫",
    正确答案: "E",
    分值: "1",
    wjId: 1,
    问卷题号: "5,6,7,10,"
  }
]);

const currentIndex = ref(0);
const answers = ref({});
const warningDialogVisible = ref(false);

const currentQuestion = computed(() => questions.value[currentIndex.value]);
const isLastQuestion = computed(
  () => currentIndex.value === questions.value.length - 1
);

const prevQuestion = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
  }
};

const nextQuestion = () => {
  if (currentIndex.value < questions.value.length - 1) {
    currentIndex.value++;
  } else if (!isAllAnswered()) {
    warningDialogVisible.value = true;
  }
};

const isAllAnswered = () => {
  return questions.value.every(
    question => answers.value[question.id] !== undefined
  );
};

const submitQuiz = async () => {
  const submissionData = formatAnswers();
  console.log("问卷提交成功: ", submissionData);
};

const formatAnswers = () => {
  return questions.value
    .map(question => {
      const answer = answers.value[question.id];
      const formattedAnswer = Array.isArray(answer)
        ? answer.join("")
        : answer || "";
      return `${question.id}-${formattedAnswer}`;
    })
    .join("$");
};
</script>

<style scoped>
.question-card {
  margin-bottom: 20px;
}

.navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>
